<template>
  <div class="page-mobile-question-bank">
    <div class="question-header">
      <div class="head-left" @click="handleClear">
        <img class="question-bank" src="/img/mobile/question-bank-v2.png" />
        <span class="question-name">题库</span>
      </div>
      <div class="head-right">
        <div class="search" @click="toSearchHandle">
          <input
            type="search"
            name="keyword"
            class="search_input"
            placeholder="请输入关键词"
            autocomplete="off"
          />
          <img class="search-icon" src="/img/mobile/search.png" />
        </div>
      </div>
    </div>
    <div class="search_dialog" :class="[show ? 'active' : '']">
      <div class="search_header">
        <input
          type="search"
          @keyup.enter="onSearch"
          name="keyword"
          v-model="search_form.keyword"
          id="search_input"
          class="search_input"
          placeholder="请输入关键词"
          autocomplete="off"
        />
        <img class="search-icon" src="/img/mobile/search.png" alt />
        <van-icon
          class="search_clear"
          v-if="search_form.keyword && search_form.keyword != ''"
          size=".4rem"
          name="clear"
          @click="clearSearchHandle"
        />
        <div class="search_cancel" @click="onCancel">取消</div>
      </div>
      <div :class="['search_content', isOpenSearch ? 'active' : '']">
        <!-- <div class="hot_keyword">
          <div class="hot_title"><van-icon name="fire-o"  style="margin-right:.1rem;"/>热门搜索</div>
          <ul class="hot_list">
            <li>关键词</li>
            <li>关键词</li>
            <li>关键词</li>
            <li>关键词</li>
            <li>关键词</li>
            <li>关键词</li>
            <li>关键词</li>
            <li>关键词</li>
          </ul>
        </div>-->
        <div class="history_keyword">
          <div class="history_title">
            <div class="t-l">
              <van-icon name="clock-o" style="margin-right:.1rem;" />最近搜索
            </div>
            <div class="t-r" @click="clearHistory">清空搜索记录</div>
          </div>
          <ul class="history_list">
            <li
              v-for="(item, index) in questionBankState.search_history_list"
              :key="index"
              @click="clickHistory(item)"
            >
              {{ item }}
            </li>
          </ul>
          <van-empty
            :description="$t('locale.mobile.classify.t7')"
            v-show="questionBankState.search_history_list.length == 0"
          />
        </div>
      </div>
    </div>
    <div class="select-action">
      <div class="select-menu">
        <div
          :class="['menu-item', isOpenClassify ? 'active' : '']"
          @click="rankingMenuHandle('comprehensive_ranking')"
        >
          <span class="menu-item-text">
            专业
          </span>
          <van-icon class="top-icon" name="play" />
        </div>
        <van-dropdown-menu direction="down" style="width:66vw">
          <van-dropdown-item
            v-model="search_form.recommend"
            :options="recommend_list"
            @change="handleFilter('recommend')"
            @open="rankingMenuHandle('close')"
          />
          <van-dropdown-item
            @change="handleFilter('price')"
            @open="rankingMenuHandle('close')"
            v-model="search_form.price"
            :options="price_list"
          />
        </van-dropdown-menu>
      </div>
      <div :class="['menu_cate', isOpenClassify ? 'active' : '']">
        <div class="cate_left">
          <ul>
            <li
              v-for="(item, index) in majorTree"
              :key="index"
              :ref="'fh' + item.id"
              :class="[search_form.major == item.id ? 'active' : '']"
              @click="handleClick(item.id, index)"
            >
              {{ item.majorName }}
            </li>
          </ul>
        </div>
        <div class="cate_right" ref="classify-content">
          <div
            v-for="(itemOne, indexOne) in majorTree"
            :key="indexOne"
            :ref="'cl' + itemOne.id"
          >
            <div
              class="cate_content"
              v-for="(itemTwo, indexTwo) in itemOne.children"
              :key="indexTwo"
              v-if="itemOne && itemOne.children"
            >
              <div
                class="cate_title"
                @click="handleClick(itemTwo.id, 'default')"
              >
                {{ itemTwo.majorName }}
              </div>
              <div
                class="cate_list"
                v-if="
                  itemTwo && itemTwo.children && itemTwo.children.length > 0
                "
              >
                <div
                  :class="[
                    'cate_item',
                    search_form.major == itemThree.id ? 'active' : ''
                  ]"
                  v-for="(itemThree, indexThree) in itemTwo.children"
                  :key="indexThree"
                  @click="handleClick(itemThree.id, 'default')"
                >
                  {{ itemThree.majorName }}
                </div>
              </div>
              <div
                class="cate_list"
                v-if="
                  itemTwo && itemTwo.children && itemTwo.children.length === 0
                "
              >
                <div
                  :class="[
                    'cate_item',
                    search_form.major == itemTwo.id ? 'active' : ''
                  ]"
                  @click="handleClick(itemTwo.id, 'default')"
                >
                  {{ itemTwo.majorName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 搜索课程 -->
    <div class="question_container">
      <div class="question_content">
        <question-card
          v-for="(item, index) in questionBankList"
          :key="'questionBankList' + index"
          :item="item"
        >
        </question-card>
      </div>

      <div class="footer" v-if="questionBankList.length != 0">
        <span class="tips">我是有底线的</span>
      </div>
      <van-empty
        :description="$t('locale.mobile.classify.t7')"
        v-show="questionBankList.length == 0"
      />
    </div>
    <div
      :class="['bg_shadow', isOpenClassify || show ? 'active' : '']"
      @click="handleClose"
    ></div>
    <div class="interest-guide-dialog" v-show="isShowInterestGuide">
      <div class="interest-hd">
        <div class="modal-close" @click="closeInterestGuide">跳过</div>
      </div>
      <div class="interest-guide">
        <div
          class="interest-guide-box"
          v-for="(item, index) in majorTree"
          :key="'interest-guide-box' + index"
        >
          <div
            class="interest-guide-title"
            @click="
              () => {
                handleClick(itemOne.id);
                isShowInterestGuide = false;
              }
            "
          >
            <span>{{ item.majorName }}</span>
          </div>
          <div class="interest-guide-content" v-if="item && item.children">
            <span
              v-for="(itemOne, indexOne) in item.children"
              :key="'content-item' + indexOne"
              :class="[
                'content-item',
                search_form.major == itemOne.id ? 'selected' : null
              ]"
              @click="
                () => {
                  handleClick(itemOne.id);
                  isShowInterestGuide = false;
                }
              "
              >{{ itemOne.majorName }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { scroll } from "~/utils/commonfun";
import QuestionCard from "~/components/question/QuestionCard.vue";
import {
  getQuestionBankList,
  getQuestionBankMajorList
} from "~/api/v2-question-bank/question-bank";

export default {
  components: {
    QuestionCard
  },
  scrollToTop: true,
  data() {
    return {
      isShowInterestGuide: false, //是否弹出兴趣选择
      rankingAction: "",
      classify_status: false,
      isOpenClassify: false, //是否打开分类窗口
      isOpenSearch: false, //是否打开搜索窗口
      search_form: {
        recommend: "",
        major: "",
        price: "",
        keyword: ""
      },
      recommend_list: [
        {
          text: this.$t("locale.mobile.course.recommendList.t1"),
          value: ""
        },
        {
          text: "热门推荐",
          value: "hot"
        }
      ],
      price_list: [
        {
          text: this.$t("locale.mobile.course.priceList.t1"),
          value: ""
        },
        {
          text: this.$t("locale.mobile.course.priceList.t2"),
          value: "desc"
        },
        {
          text: this.$t("locale.mobile.course.priceList.t3"),
          value: "asc"
        }
      ],
      /* 题库列表 */
      questionBankList: [],
      /* 题库相关 */
      questionBank: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      /* 题库专业树列表 */
      majorTree: [],
      /* 题库专业列表 */
      majorList: [],
      show: false
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      search_history_list(state) {
        return state.search_history_list;
      },
      major_list(state) {
        return state.major_list;
      },
      is_member(state) {
        return JSON.stringify(state.member_info) != "{}";
      },
      user_member(state) {
        return state.member_info;
      },
      is_loading(state) {
        return state.is_loading;
      },
      questionBankState(state) {
        return state.questionBank;
      }
    }),
    action() {
      return this.$route.query.action;
    }
  },
  watch: {},
  deactivated() {
    if (process.client) {
      window.removeEventListener("scroll", this.eventListener);
    }
  },
  activated() {
    this.initPage();
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
  },
  beforeDestroy() {
    if (process.client) {
      window.removeEventListener("scroll", this.eventListener);
    }
  },
  methods: {
    ...mapActions(["initMajorList", "initMember"]),
    ...mapMutations([
      "SET_IS_LOADING",
      "INIT_QUESTION_BANK_SEARCH_HISTORY",
      "SET_QUESTION_BANK_SEARCH_HISTORY",
      "CLEAR_QUESTION_BANK_SEARCH_HISTORY"
    ]),
    /* 头部下拉选项 */
    handleFilter(type) {
      if (type == "recommend") {
        this.questionBank = {
          ...this.questionBank,
          page: 1
        };
      } else if (type == "price") {
        this.questionBank = {
          ...this.questionBank,
          page: 1
        };
      }
      this.getQuestionBanks();
    },
    /* 关闭兴趣专业选择 */
    closeInterestGuide() {
      this.isShowInterestGuide = false;
    },
    /* 顶部菜单切换 */
    rankingMenuHandle(action) {
      if (action == "close") {
        this.isOpenClassify = false;
      } else {
        if (this.isOpenClassify) {
          this.isOpenClassify = false;
        } else {
          this.isOpenClassify = true;
        }
      }
    },
    clearSearchHandle() {
      this.search_form = {
        ...this.search_form,
        keyword: ""
      };
      this.questionBank = {
        ...this.questionBank,
        page: 1
      };
      this.CLEAR_QUESTION_BANK_SEARCH_HISTORY();
      this.getQuestionBanks();
    },
    toSearchHandle() {
      this.show = true;
      this.isOpenSearch = true;
      this.isOpenClassify = false;
    },
    /* 关键词搜索 */
    onSearch() {
      this.isOpenSearch = false;
      // this.classify_status = false;
      this.questionBank = {
        ...this.questionBank,
        page: 1
      };
      const { keyword } = this.search_form;
      this.SET_QUESTION_BANK_SEARCH_HISTORY(keyword);
      this.getQuestionBanks();
      // if (process.client) {
      //   window.removeEventListener("scroll", this.eventListener);
      // }
    },
    /* 关闭搜索弹窗 */
    onCancel() {
      this.isOpenSearch = false;
      this.show = false;
    },
    /* 切换专业 */
    handleClick(id, index) {
      this.search_form = {
        ...this.search_form,
        major: id
      };
      this.questionBank = {
        ...this.questionBank,
        page: 1
      };
      this.getQuestionBanks();
    },
    clearHistory() {
      this.CLEAR_SEARCH_HISTORY();
    },
    clickHistory(val) {
      this.classify_status = false;
      if (process.client) {
        window.removeEventListener("scroll", this.eventListener);
      }
      this.isOpenSearch = false;
      this.getQuestionBanks();
    },
    /* 上拉事件 */
    eventListener() {
      this.throttleTwo(this.pullUp, 300);
    },
    /* 上拉加载 */
    pullUp() {
      // 滚动条离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 窗口可视区域高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 滚动区域高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 滚动条 + 可视区域高度 >= 滚动条高度 ==>  滚动条触底
      // console.log(scrollTop + "+" + clientHeight + ">=" + scrollHeight);
      //适配处理:-120的是距离底部120px触发上拉加载，而不是触底加载
      if (scrollTop + clientHeight >= scrollHeight - 120) {
        if (this.is_loading) {
          return;
        }
        if (this.questionBankList.length >= this.questionBank.total) {
          return;
        }
        this.questionBank = {
          ...this.questionBank,
          page: this.questionBank.page + 1
        };
        this.getQuestionBanks("pullup");
        // console.log("上拉加载2");
      }
    },
    /* 节流函数 */
    throttleTwo(fn, delay) {
      let lastTime = 0;
      return !(function() {
        let nowTime = Date.now();
        if (nowTime - lastTime > delay) {
          fn.call(this);
          lastTime = nowTime;
        }
      })();
    },
    /* 清除专业 */
    handleClear() {
      this.search_form = {
        ...this.search_form,
        major: ""
      };
      this.questionBank = {
        ...this.questionBank,
        page: 1
      };
      this.getQuestionBanks();
    },
    /* 获取题库列表 */
    async getQuestionBanks(type) {
      this.SET_IS_LOADING(true);
      const { total, page, pageSize } = this.questionBank;
      let params = {
        offset: (page - 1) * pageSize,
        limit: pageSize,
        sort: "id desc",
        isDel: 1
      };
      const { recommend, major, price, keyword } = this.search_form;
      if (major) {
        params = {
          ...params,
          majorId: major
        };
      }
      if (price) {
        params = {
          ...params,
          sort: "price " + price
        };
      }
      if (keyword) {
        params = {
          ...params,
          keyword
        };
      }
      if (recommend) {
        params = {
          ...params,
          sort: "studentSum desc"
        };
      }
      let result = await getQuestionBankList(params);
      console.log("题库列表：", result);
      if (result && result.data && result.data.code == 200) {
        const { rows, total, records } = result.data.data;
        if (type == "pullup") {
          this.questionBankList = [...this.questionBankList, ...rows];
        } else {
          this.questionBankList = rows;
        }
        this.questionBank = {
          ...this.questionBank,
          total
        };
        this.handleClose();
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
      }
    },
    /* 获取题库专业列表 */
    async getQuestionBankMajors() {
      this.SET_IS_LOADING(true);
      let result = await getQuestionBankMajorList();
      console.log("题库专业列表：", result);
      if (result && result.data && result.data.code == 200) {
        const { rows, total, records } = result.data.data;
        this.majorTree = rows;
        console.log("this.majorTree:", this.majorTree);
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
      }
    },
    /* 关闭弹窗 */
    handleClose() {
      this.isOpenClassify = false;
      this.isOpenSearch = false;
      this.show = false;
    },
    /* 初始化页面 */
    initPage() {
      this.questionBank.page = 1;
      this.getQuestionBanks();
      this.getQuestionBankMajors();
      if (process.client) {
        this.INIT_QUESTION_BANK_SEARCH_HISTORY();
      }
    }
  },
  created() {
    // this.initPage();
  },
  mounted() {
    if (process.client) {
    }
  }
};
</script>

<style lang="scss" scoped>
.page-mobile-question-bank {
  .menu_cate {
    position: absolute;
    border-top: 1px solid #f7f8fa;
    border-bottom: 1px solid #f7f8fa;
    left: 0;
    top: 1.6rem;
    width: 100%;
    height: 61vh;
    background: #fff;
    display: flex;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    -webkit-transform: translate3d(0, -250%, 0);
    transform: translate3d(0, -250%, 0);
    z-index: 8;
    .cate_left {
      width: 30%;
      height: 61vh;
      background-color: #f7f8fa;
      ul {
        width: 100%;
        height: 61vh;
        overflow-y: scroll;
        li {
          width: 100%;
          height: 1rem;
          line-height: 1rem;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 0.3rem;
          font-weight: bold;
        }
        li.active {
          background: #ffffff;
          color: var(--theme-color);
          position: relative;
          &::after {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 0.05rem;
            height: 0.4rem;
            display: block;
            background: var(--theme-color);
          }
        }
      }
    }
    .cate_right {
      width: 70%;
      height: 61vh;
      background-color: #ffffff;
      padding: 0.2rem;
      box-sizing: border-box;
      overflow-y: scroll;
      .cate_content {
        .cate_title {
          padding: 0.2rem 0.1rem;
          // font-size: .26rem;
          font-size: 0.3rem;
          color: #313233;
          font-weight: bold;
        }
        .cate_list {
          display: flex;
          flex-wrap: wrap;
          .cate_item {
            background-color: #f7f8fa;
            padding: 0.1rem 0.2rem;
            margin-right: 0.2rem;
            margin-bottom: 0.2rem;
          }
          .cate_item.active {
            color: var(--theme-color);
            background: #ebf2ff;
          }
        }
      }
    }
  }
  .menu_cate.active {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
</style>
<style lang="scss">
.page-mobile-question-bank {
  background-color: #f7f7fa;
  min-height: calc(100vh - 0.9408rem);
  .van-dropdown-menu .van-dropdown-menu__title .van-ellipsis {
    font-size: 0.2496rem;
    font-weight: bold;
  }
  .question-header {
    position: fixed;
    background: #ffffff;
    top: 0;
    left: 0;
    z-index: 1100;

    display: flex;
    align-items: center;
    // border-bottom: 1px solid #000;
    .head-left {
      background: #ffffff;
      //   width: 2.2rem;
      width: 1.7rem;
      height: 0.8rem;
      //   padding: 0.2rem 0.05rem 0.2rem 0.15rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      .question-bank {
        width: 0.3264rem;
        height: 0.3456rem;
        display: block;
        background: var(--theme-color);
      }
      .question-name {
        font-size: 0.3456rem;
        font-weight: bold;
        margin-left: 0.1rem;
        color: #313233;
      }
    }
    .head-right {
      width: 5.5rem;
      height: 0.8rem;
      background: #ffffff;
      .search {
        background: #ffffff;
        width: 5.3rem;
        // margin: 0 auto;
        height: 0.8rem;
        padding: 0.1rem 0.1rem;
        box-sizing: border-box;
        position: relative;
        .search_input {
          width: 100%;
          height: 100%;
          border-radius: 0.5rem;
          padding-left: 0.6rem;
          padding-right: 0.2rem;
          font-size: 0.26rem;
          line-height: 0.26rem;
          background-color: #f5f6f7;
          border: none;
          pointer-events: none;
        }
        .search-icon {
          display: block;
          width: 0.26rem;
          height: 0.26rem;
          // width: 0.36rem;
          // height: 0.36rem;
          position: absolute;
          left: 0.35rem;
          transform: translateY(-50%);
          top: 50%;
        }
      }
    }
    .menu_cate {
      position: absolute;
      border-top: 1px solid #f7f8fa;
      border-bottom: 1px solid #f7f8fa;
      left: 0;
      top: 0.8rem;
      width: 100%;
      height: 61vh;
      background: #fff;
      display: flex;
      -webkit-transition: -webkit-transform 0.2s ease;
      transition: -webkit-transform 0.2s ease;
      transition: transform 0.2s ease;
      transition: transform 0.2s ease, -webkit-transform 0.2s ease;
      -webkit-transform: translate3d(0, -250%, 0);
      transform: translate3d(0, -250%, 0);
      z-index: -1;
      .cate_left {
        width: 30%;
        height: 61vh;
        background-color: #f7f8fa;
        ul {
          width: 100%;
          height: 61vh;
          overflow-y: scroll;
          li {
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.3rem;
            font-weight: bold;
          }
          li.active {
            background: #ffffff;
            color: var(--theme-color);
            position: relative;
            &::after {
              content: "";
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 0.05rem;
              height: 0.4rem;
              display: block;
              background: var(--theme-color);
            }
          }
        }
      }
      .cate_right {
        width: 70%;
        height: 61vh;
        background-color: #ffffff;
        padding: 0.2rem;
        box-sizing: border-box;
        overflow-y: scroll;
        .cate_content {
          .cate_title {
            padding: 0.2rem 0.1rem;
            // font-size: .26rem;
            font-size: 0.3rem;
            color: #313233;
            font-weight: bold;
          }
          .cate_list {
            display: flex;
            flex-wrap: wrap;
            .cate_item {
              background-color: #f7f8fa;
              padding: 0.1rem 0.2rem;
              margin-right: 0.2rem;
              margin-bottom: 0.2rem;
            }
            .cate_item.active {
              color: var(--theme-color);
              background: #ebf2ff;
            }
          }
        }
      }
    }
    .menu_cate.active {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  }
  .search_dialog {
    position: fixed;
    background: #ffffff;
    top: 0;
    left: 0;
    z-index: 1101;
    width: 100%;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    .search_header {
      width: 100%;
      height: 0.8rem;
      position: relative;
      padding: 0.1rem 0.3rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      background: #ffffff;
      .search_input {
        width: 80%;
        height: 100%;
        border-radius: 0.5rem;
        padding-left: 0.6rem;
        padding-right: 0.5rem;
        background-color: #f5f6f7;
        font-size: 0.26rem;
        line-height: 0.26rem;
        border: none;
      }
      .search-icon {
        display: block;
        width: 0.26rem;
        height: 0.26rem;
        // width: 0.36rem;
        // height: 0.36rem;
        position: absolute;
        left: 0.55rem;
        transform: translateY(-50%);
        top: 50%;
      }
      .search_clear {
        position: absolute;
        right: 1.74rem;
        transform: translateY(-50%);
        top: 50%;
      }
      .search_cancel {
        color: var(--theme-color);
        font-size: 0.3rem;
        padding: 0.1rem 0.2rem;
        margin-left: 0.2rem;
        // color: #ffffff;
        // background: var(--theme-color);
      }
    }
    .search_content {
      position: absolute;
      border-top: 1px solid #f7f8fa;
      border-bottom: 1px solid #f7f8fa;
      left: 0;
      top: 0.8rem;
      width: 100%;
      min-height: 40vh;
      box-sizing: border-box;
      padding: 0.2rem;
      // display: flex;
      background: #ffffff;
      -webkit-transition: -webkit-transform 0.2s ease;
      transition: -webkit-transform 0.2s ease;
      transition: transform 0.2s ease;
      transition: transform 0.2s ease, -webkit-transform 0.2s ease;
      -webkit-transform: translate3d(0, -250%, 0);
      transform: translate3d(0, -250%, 0);
      z-index: -1;
      .hot_keyword {
        margin-bottom: 0.2rem;
        .hot_title {
          display: flex;
          align-items: center;
          color: #909090;
          font-size: 0.3rem;
        }
        .hot_list {
          display: flex;
          font-size: 0.26rem;
          margin-top: 0.1rem;
          flex-wrap: wrap;
          li {
            padding: 0.1rem 0.2rem;
            margin-right: 0.2rem;
            margin-bottom: 0.2rem;
            border: 1px solid #ddd;
            border-radius: 0.3rem;
          }
        }
      }
      .history_keyword {
        .history_title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #909090;
          font-size: 0.3rem;
          margin-bottom: 0.2rem;
          .t-l {
            display: flex;
            align-items: center;
          }
          .t-r {
            color: var(--theme-color);
          }
        }
        .history_list {
          display: flex;
          font-size: 0.26rem;
          margin-top: 0.1rem;
          flex-wrap: wrap;
          li {
            padding: 0.1rem 0.2rem;
            margin-right: 0.2rem;
            margin-bottom: 0.2rem;
            border: 1px solid #ddd;
            border-radius: 0.3rem;
          }
        }
      }
    }
    .search_content.active {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  }
  .search_dialog.active {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .select-action {
    position: relative;
    width: 7.2rem;
    height: 0.8rem;
    background-color: #ffffff;
    .select-menu {
      position: fixed;
      top: 0.8rem;
      left: 0;
      width: 100%;
      z-index: 9;
      display: flex;
      background-color: #ffffff;
      border-bottom: 0.0096rem solid #ededf1;
      .menu-item {
        width: 33.33333%;
        height: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        .menu-item-text {
          font-size: 0.2496rem;
          font-weight: bold;
        }
        .top-icon {
          margin-left: 0.1rem;
          // transform: translateY(16%) rotateZ(-90deg);
          transform: rotateZ(90deg);
        }
        .price-icon {
          margin-left: 0.1rem;
          position: relative;
          .top-icon {
            position: absolute;
            left: 0;
            top: -0.04rem;
            margin-left: 0;
            transform: rotateZ(90deg);
          }
          .bottom-icon {
            position: absolute;
            left: 0;
            bottom: -0.04rem;
            margin-left: 0;
            transform: rotateZ(-90deg);
          }
        }
      }
      .menu-item.active {
        color: var(--theme-color);
        .top-icon {
          transform: rotateZ(-90deg);
        }
      }
      .menu-item.price_low {
        color: var(--theme-color);
        .top-icon {
          color: var(--theme-color);
        }
        .bottom-icon {
          color: #000;
        }
      }
      .menu-item.price_high {
        color: var(--theme-color);
        .top-icon {
          color: #000;
        }
        .bottom-icon {
          color: var(--theme-color);
        }
      }
    }
  }
  .question_container {
    margin: 0.8rem 0 0;
    .question_content {
      overflow: hidden;
    }

    .footer {
      padding: 0.3rem;
      font-size: 0.26rem;
      color: #babec2;
      text-align: center;
      .tips {
        position: relative;
      }
      .tips::before {
        content: "";
        display: block;
        position: absolute;
        left: -1.7rem;
        top: 50%;
        transform: translateY(-1px);
        width: 1.5rem;
        height: 1px;
        background: #babec2;
      }
      .tips::after {
        content: "";
        display: block;
        position: absolute;
        right: -1.7rem;
        top: 50%;
        width: 1.5rem;
        transform: translateY(-1px);
        height: 1px;
        background: #babec2;
      }
    }
  }
  .bg_shadow {
    position: fixed;
    left: 0;
    top: 0.8rem;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 7;
    display: none;
  }
  .bg_shadow.active {
    display: block;
  }
  .interest-guide-dialog {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2001;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    .interest-hd {
      display: flex;
      justify-content: flex-end;
      padding: 0.288rem;
      .modal-close {
        width: 1.056rem;
        height: 0.4224rem;
        border-radius: 0.2112rem;
        border: solid 0.0192rem var(--theme-color);
        color: var(--theme-color);
        font-size: 0.2496rem;
        text-align: center;
        line-height: 0.4224rem;
      }
    }
    .interest-guide {
      // padding: 0 .288rem;
      padding-left: 0.288rem;
      width: 7.2rem;
      height: calc(100% - 0.9984rem);
      overflow: auto;
      .interest-guide-box {
        .interest-guide-title {
          font-weight: bold;
          font-size: 0.288rem;
          color: #313233;
          position: relative;
          span {
            margin-left: 0.2rem;
          }
          &::before {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 0.0384rem;
            height: 0.3072rem;
            border-radius: 0.0192rem;
            background: var(--theme-color);
          }
        }
        .interest-guide-content {
          margin-bottom: 0.4rem;
          &::after {
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
            overflow: hidden;
            content: "";
          }
          &.selected {
            .content-item {
              color: var(--theme-color);
              background: #ebf2ff;
            }
          }
          .content-item {
            display: block;
            width: 1.44rem;
            height: 0.5376rem;
            float: left;
            background-color: #f2f3f5;
            border-radius: 0.0576rem;
            margin: 0.288rem 0.288rem 0 0;
            text-align: center;
            line-height: 0.5376rem;
            color: #7c7d80;
            font-size: 0.2304rem;
            &.selected {
              color: var(--theme-color);
              background: #ebf2ff;
            }
          }
        }
      }
    }
  }
}
</style>
